<template>
	<view>
		<!-- 顶部轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item,k in swiperImg" :key="k">				
					<view class="swiper-item">
						<image style="width: 100%;height: 100%;" :src="item" ></image>							
					</view>
				</swiper-item>
				<view v-if="videoSrc" class="swiper-item">
					<video
						class="video"
						:src="videoSrc"
						:enable-play-gesture="true"
						:muted="true" 
						:vslide-gesture="true" 
						:autoplay="false" 
						:page-gesture="true" 
						:show-mute-btn="true"
						controls="false"
					>
					</video>
				</view>
			</swiper>
		</view>
		
		<view class="car-info">
			<view class="info-left">
				<view class="car-name">{{productInfo.name}}</view>
			</view>
		    <view class="info-right">
		    	<view class="right-price">
		    		<view class="" style="color: red;">
		    			￥
		    		</view>
					<view class="" style="color: red;font-size: 1.3rem;">
						{{productInfo.price}}
					</view>
					<view class="">
						万
					</view>
		    	</view>
		    </view>
		</view>
		
		<view class="carparameter" @click="goParameterInfo">
			<view class="carparameter-item">
				<view class="item-left">
					档案
				</view>
				<view class="item-middle">
					<view class="middle-item">
						<view class="item-top">
							{{productInfo.registrationTime}}
						</view>
						<view class="item-bot">
							首次上牌
						</view>
					</view>
					<view class="middle-item">
						<view class="item-top">
							{{productInfo.kilometers}}
						</view>
						<view class="item-bot">
							表显里程
						</view>
					</view>
					<view class="middle-item">
						<view class="item-top">
							{{productInfo.numberOfTransfers}}
						</view>
						<view class="item-bot">
							过户次数
						</view>
					</view>
					<view class="middle-item">
						<view class="item-top">
							{{productInfo.licenseplateland}}
						</view>
						<view class="item-bot">
							车源地
						</view>
					</view>
				</view>
				<view class="item-right">
					>
				</view>
			</view>
			<view class="carparameter-item">
				<view class="item-left">
					参数
				</view>
				<view class="item-middle">
					<view class="middle-item">
						<view class="item-top">
							{{productInfo.displacement}}
						</view>
						<view class="item-bot">
							发动机
						</view>
					</view>
					<view class="middle-item">
						<view class="item-top">
							{{productInfo.gearbox}}
						</view>
						<view class="item-bot">
							变速箱
						</view>
					</view>
					<view class="middle-item">
						<view class="item-top">
							{{productInfo.emission}}
						</view>
						<view class="item-bot">
							排放
						</view>
					</view>
					<view class="middle-item">
						<view class="item-top">
							{{productInfo.color}}
						</view>
						<view class="item-bot">
							颜色
						</view>
					</view>
				</view>
				<view class="item-right">
					>
				</view>
			</view>
			<view class="carparameter-item">
				<view class="item-left">
					亮点
				</view>
				<view class="item-middle">
					<view class="middle-item" v-for="item in highlight" :key="item.id">
						<view class="item-top">
							<image :src="'https://adjyxw.h1668.com' + item.thumb" mode=""></image>
						</view>
						<view class="item-bot">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="item-right">
					>
				</view>
			</view>
		</view>
		
		<view class="subscribeInfo">
			<view class="infoItem">
				<view class="label">车辆价格</view>
				<view class="value" style="display: flex;">
					<view class="">
						<u-input v-model="carprice" type="digit" :border="false" input-align="right" placeholder="请填写车辆价格"/>
					</view>
					<view class="" style="height: 38px;line-height: 38px;">
						万
					</view>
				</view>
			</view>
			<view class="infoItem">
				<view class="label">联系人</view>
				<view class="value">
					<view>
						<u-input v-model="contacts" :type="text" :border="false" input-align="right" placeholder="请填写联系人"/>
					</view>
				</view>
			</view>
			<view class="infoItem">
				<view class="label">联系电话</view>
				<view class="value">
					<view>
						<u-input v-model="telephone" :type="text" :border="false" input-align="right" placeholder="请填写联系电话"/>
					</view>					
				</view>
			</view>
		</view>
		
		<view class="" style="padding: 20px;">
			<u-button type="primary" @click="submit">提交审核</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				proId: 0,
				userData: [],
				productInfo: [],
				swiperImg: [],
				highlight: [],
				videoSrc: '',
				carprice: '',
				contacts: '',
				telephone: '',
			};
		},
		onLoad(item) {
			this.proId = item.id
			this.getproDetail()
		},
		onShow() {
			this.userData = uni.getStorageSync('userData')
		},
		methods: {
			//前往配置参数页
			goParameterInfo() {
				let id = this.proId
				uni.navigateTo({
					url: '/pagesA/productA/parameterInfo?id=' +id
				})
			},
			//提交按钮
			submit() {
				this.postMessage()
			},
			//post信息给后端
			postMessage() {
				uni.request({
					url: uni.getStorageSync('URL') + '/home/product/product/proedit',
					method: 'POST',
					data: {
						proid: this.proId,
						busid: this.userData.id,//用户id
						nickname: this.contacts,//联系人姓名
						mobile: this.telephone,//联系人电话
						price: this.carprice,//车辆价格
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 1){
							uni.$u.toast('编辑成功，请耐心等待审核')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pagesC/releaseCar/releaseRecords?id=0'
								})
							}, 1500)
						}else {
							uni.showToast({
								icon: 'none',
								title: '编辑失败，请稍后再试',
								duration: 2000,
							});
						}
					}
				})
			},
			getproDetail() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/product/product/info',
					method: 'POST',
					data: {
						id: this.proId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						let result = res.data.data.info
						this.productInfo = result
						this.carprice = result.price
						this.contacts = result.contactName
						this.telephone = result.contactPhone
						this.swiperImg = result.thumbs_text
						this.videoSrc = result.vedio_text
						this.highlight = result.light_text.slice(0,4)//只取4个亮点配置
					}
				})
			},
 		},
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
	.swiper {
		height: 400rpx;
		.swiper-item {
			display: block;
			height: 350rpx;
			line-height: 350rpx;
			text-align: center;
		}
	}
}
.video {
	height: 100%;
	width: 100%;
}
.car-info {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	.info-left {
		.car-name {
			font-size: 1.25rem;
			color: black;
			font-weight: bold;
			margin-bottom: 15rpx;
		}
		.carde {
			display: flex;
			.carpeizhi {
				color: #909090;
				font-size: 0.9rem;
				margin-bottom: 20rpx;
			}
			.cardetail {
				margin-left: 10px;
				color: #7bb8b3;
				font-size: 0.9rem;
			}
		}
	}
	.info-right {
		// width: 130px;
		height: 30px;
		line-height: 30px;
		.right-price {
			display: flex;
			align-items: flex-end;
			line-height: 1;
		}
	}
}
.configuration {
	.configuration-title {
		color: black;
		font-size: 16px;
		margin-left: 10px;
		border-bottom: 1px solid #bababa;
		border-top: none;
		border-left: none;
		border-right: none;
	}
	.configuration-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.content-item {
			width: calc(33.33% - 10px);
			height: 60px;
			margin-bottom: 10px;
			text-align: center;
			.item-top {
				margin-top: 10px;
				font-size: 17px;
			}
			.item-bottom {
				margin-top: 5px;
				color: #ccc;
				font-size: 16px;
			}
		}
	}
}
.subscribeInfo {
	margin-top: 20rpx;

	.infoItem {
		height: 76rpx;
		display: flex;
		color: #5D5C5C;
		border-bottom: 1px solid #F1F1F1;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		padding: 0 30rpx;
		margin-top: 20rpx;

		.label {
			font-size: 34rpx;
		}

		.value {
			font-size: 32rpx;
			display: flex;
			margin-right: 10rpx;

			.icon {
				width: 40rpx;
			}
		}
	}

	.infoItem:last-child {
		border-bottom: 0;
	}
}
.title {
	font-size: 18px;
	margin-left: 15rpx;
}
.content {
	margin-top: 50rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	.content-item {
		width: 30%;
		text-align: center;
		image{
			border: #5D5C5C 1px solid;
			border-radius: 10px;
			width: 100%;
			height: 110px;
		}
		text{
			color: black;
			font-size: 18px;
			font-weight: bold;
		}
	}
}
.bottom {
	text-align: center;
	font-size: 18px;
	margin-top: 110rpx;
}
.bottomone {
	width: 100%;
	margin: 0 auto;
}
.bottomtow {
	width: 50%;
	margin: 15px auto
}
.color {
	.colorone, .colortow{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		.colorone-item, .colortow-item {
			view{
				border: #5D5C5C 1px solid;
				border-radius: 5px;
			}
		}
	}
	.colortow {
		margin-top: 10px;
	}
}
.show {
	width: 90%;
	margin: 0 auto;
	.show-title {
		margin-top: 50px;
		font-size: 18px;
	}
	.show-content{
		margin-left: 50rpx;
		color: #5D5C5C;
	}
}
.image{
	.image-top {
		font-size: 34rpx;
		padding: 15px;
	}
	.top-tishi {
		font-size: 25rpx;
	}
}
.carparameter {
	width: 90%;
	margin: 15rpx auto;
	.carparameter-item {
		width: 100%;
		display: flex;
		margin-top: 20rpx;
		.item-left {
			width: 12%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: left;
		}
		.item-middle {
			width: 85%;
			height: 90rpx;
			display: flex;
			justify-content: space-around;
			text-align: center;
			.middle-item {
				width: 25%;
				height: 110rpx;
				.item-top {
					width: 100%;
					height: 55rpx;
					line-height: 55rpx;
					image {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				.item-bot {
					height: 55rpx;
					line-height: 55rpx;
					color: #c0bfc4;
				}
			}
		}
		.item-right {
			width: 3%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: right;
			color: #c0bfc4;
		}
	}
}
</style>
